---
id: swiperating
title: SwipeRating
---

import { IconsStyle } from "@site/src/components/Docs_Icons";
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import CodeBlock from "@theme/CodeBlock";
import { BiInfoCircle } from "react-icons/bi";

<IconsStyle />

<div class="row inline-flex-center">
  <div class="col col--3">
    <h4>Import</h4>
  </div>
  <div class="col col--9">
    <CodeBlock>{`import { SwipeRating } from '@rneui/themed';`}</CodeBlock>
  </div>
  <div class="col col--3">
    <h4>
      Theme Key{" "}
      <a href="../customizing#using-themeprovider">
        <BiInfoCircle />
      </a>
    </h4>
  </div>
  <div class="col col--9">
    <CodeBlock>{`SwipeRating`}</CodeBlock>
  </div>
</div>

## Usage

## Props

<div class='table-responsive'>

| Name                    | Type                                                | Default                        | Description                                                                                              |
| ----------------------- | --------------------------------------------------- | ------------------------------ | -------------------------------------------------------------------------------------------------------- |
| `fractions`             | any                                                 | `0`                            | The number of decimal places for the rating value; must be between 0 and 20                              |
| `imageSize`             | number                                              | `50`                           | The size of each rating image                                                                            |
| `jumpValue`             | number                                              | `0 (not to jump)`              | The number to jump per swipe                                                                             |
| `minValue`              | number                                              | `0`                            | The minimum value the user can select                                                                    |
| `onFinishRating`        | (value: number) => void                             | `Function`                     | Callback method when the user finishes rating. Gives you the final rating value as a whole number        |
| `onStartRating`         | (value: number) => void                             | `Function`                     | Callback method when the user starts rating.                                                             |
| `onSwipeRating`         | (value: number) => void                             | `Function`                     | Callback method when the user is swiping.                                                                |
| `ratingBackgroundColor` | string                                              | `'white'`                      | Pass in a custom background-fill-color for the rating icon; use this along with type='custom' prop above |
| `ratingColor`           | string                                              | `'#f1c40f'`                    | Pass in a custom fill-color for the rating icon; use this along with type='custom' prop above            |
| `ratingCount`           | number                                              | `5`                            | Number of rating images to display                                                                       |
| `ratingImage`           | ReactNode                                           | `require('./images/star.png')` | Pass in a custom image source; use this along with type='custom' prop above                              |
| `ratingTextColor`       | string                                              | `#f1c40f`                      | Color used for the text labels                                                                           |
| `readonly`              | boolean                                             | `false`                        | Whether the rating can be modified by the user                                                           |
| `showRating`            | boolean                                             | `false`                        | Displays the Built-in Rating UI to show the rating value in real-time                                    |
| `showReadOnlyText`      | boolean                                             | `false`                        | Whether the text is read only                                                                            |
| `startingValue`         | number                                              | `ratingCount/2`                | The initial rating to render                                                                             |
| `style`                 | View Style                                          |                                | Exposes style prop to add additional styling to the container view                                       |
| `tintColor`             | string                                              |                                | Color used for the background                                                                            |
| `type`                  | `star` \| `heart` \| `rocket` \| `bell` \| `custom` | `star`                         | Graphic used for represent a rating                                                                      |

</div>
